<template>
  <div>
    <div>
      <el-form ref="form" :model="warningSkuList" label-width="80px">
        <el-form-item label="采购单号">
          <span>{{warningSkuList.purchaseNumber}}</span>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="warningSkuList.suppliersId" placeholder="请选择供应商">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column prop="skuId" label="编号" width="55"></el-table-column>
        <el-table-column prop="skuName" label="名称" width="450"></el-table-column>
        <el-table-column prop="price" label="价格" ></el-table-column>
        <el-table-column prop="inventory" label="库存" ></el-table-column>
        <el-table-column prop="warningValue" label="预警值" ></el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
              <el-input  v-model="scope.row.purchaseNum" style="width: 240px"  />
          </template>
        </el-table-column>
        <el-table-column  label="状态" >
          <template #default="scope">
            <div v-if="scope.row.status === 1">
              <span style="margin-left: 10px">{{ "正在采购" }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-button type="primary" @click="addPurchase" >购买</el-button>
    </div>
  </div>
</template>

<script>
import { warningSkuList,supplierList,add } from "@/api/business/purchase";

export default {
  name: "Purchase",
  dicts: ['sys_yes_no'],
  data() {
    return {
      tableData:[],
      warningSkuList: {
        skuPurchases:[]
        },
      options:[],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      warningSkuList().then(response => {
        this.tableData = response;
        console.log(this.tableData)
        }
      );
      supplierList().then(response=>{
          this.options = response.data
      })
      this.getProjectNum()
      this.warningSkuList.purchaseNumber = this.CurrentDate + Math.floor(Math.random() * 10000)
    },

    getProjectNum() {
        const projectTime = new Date()
        const Year = projectTime.getFullYear()
        const Month = projectTime.getMonth() + 1
        const Day = projectTime.getDate()
        this.CurrentDate = Year
        if (Month >= 10) {
          this.CurrentDate += Month
        } else {
          this.CurrentDate += '0' + Month
        }
        if (Day >= 10) {
          this.CurrentDate += Day
        } else {
          this.CurrentDate += '0' + Day
        }
      },


      handleSelectionChange(val){
        this.warningSkuList.skuPurchases = []
        val.forEach(sku=>{
          this.warningSkuList.skuPurchases.push(sku)
        })
      },

    addPurchase(){
      this.warningSkuList.skuPurchases.forEach(sku=>{
        sku.purchaseNum = (Number)(sku.purchaseNum)
      })
      console.log(this.warningSkuList)
      add(this.warningSkuList).then(response=>{
        console.log(response)
        if(response.code == 200){
          this.$modal.msgSuccess("采购成功");
          this.getList()
        }

      })
    }
  }
};
</script>
